<template>
	<view style="height: 100vh; box-sizing: border-box; background-color: #f5f5f5">
		<topLogo></topLogo>
		<view style="display: flex; flex-direction: column; height: 94%; padding: 24px 20px 20px; box-sizing: border-box">
			<view style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center">
				<span style="font-weight: bold; font-size: 24px; color: #333333; line-height: 22px">校区名称：{{ campus }}</span>

				<view style="display: flex; gap: 12px">
					<view
						@click="toTeacherTable"
						style="width: 120px; display: flex; justify-content: center; align-items: center; height: 34px; background: #1c65dd; border-radius: 3px 3px 3px 3px"
					>
						<image src="/static/laoshitongji.png" style="width: 16px; height: 16px; margin-right: 4px" mode=""></image>
						<text style="font-size: 16px; color: #ffffff">老师统计</text>
					</view>

					<view
						@click="showSwiper"
						style="width: 120px; display: flex; justify-content: center; align-items: center; height: 34px; background: #1c65dd; border-radius: 3px 3px 3px 3px"
					>
						<image src="/static/jinrulunbo.png" style="width: 16px; height: 16px; margin-right: 4px" mode=""></image>
						<text style="font-size: 16px; color: #ffffff">进入轮播图</text>
					</view>

					<view
						@click="showQrcodeModal"
						style="width: 120px; display: flex; justify-content: center; align-items: center; height: 34px; background: #1c65dd; border-radius: 3px 3px 3px 3px"
					>
						<image src="/static/upload.png" style="width: 16px; height: 16px; margin-right: 4px" mode=""></image>
						<text style="font-size: 16px; color: #ffffff">上传轮播图</text>
					</view>
				</view>
			</view>

			<PageWrapper>
				<!-- 两个按钮 -->
				<view style="display: flex; justify-content: space-between; margin-bottom: 20px">
					<view @click="toNoEnter" class="clickBtn">
						<image src="@/static/NoEnter1@2x.png" style="width: 68px; height: 68px; margin-right: 14px" mode=""></image>
						<view style="display: flex; flex-direction: column">
							<span style="font-size: 18px; color: #666666">未录入头像（个）</span>
							<span style="font-weight: 500; font-size: 34px; color: #333333">{{ noFaceCount }}</span>
						</view>
					</view>
					<view @click="toEntered" class="clickBtn">
						<image src="@/static/Vector@2x.png" style="width: 68px; height: 68px; margin-right: 14px" mode=""></image>
						<view style="display: flex; flex-direction: column">
							<span style="font-size: 18px; color: #666666">已录入头像（个）</span>
							<span style="font-weight: 500; font-size: 34px; color: #333333">{{ faceCount }}</span>
						</view>
					</view>
				</view>
				<view
					style="
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20px;
						box-sizing: border-box;
						width: 100%;
						background-color: #fff;
						border-radius: 8px;
						margin-bottom: 20px;
						color: #333;
					"
				>
					<view style="width: 40%">
						<up-notice-bar icon="volume-fill" direction="column" bgColor="#fff" color="#333" fontSize="20" :text="textTip"></up-notice-bar>
					</view>
					<view @click="toCancelledClasses" style="font-size: 20px; display: flex; align-items: center">
						<text style="display: flex">查看详情</text>
						<u-icon size="24" name="arrow-right-double"></u-icon>
					</view>
				</view>
				<!-- 列表 -->
				<view
					style="
						display: flex;
						justify-content: space-between;
						padding: 20px;
						box-sizing: border-box;
						width: 100%;
						background-color: #fff;
						border-radius: 8px 8px 0 0;
						position: sticky;
						font-weight: 600;
						font-size: 20px;
						color: #333;
					"
				>
					<text>今日可消课学生</text>
					<view
						@click="getCampusInfo()"
						style="width: 120px; display: flex; justify-content: center; align-items: center; height: 34px; background: #1c65dd; border-radius: 3px 3px 3px 3px"
					>
						<text style="font-size: 16px; color: #ffffff">刷新</text>
					</view>
				</view>
				<view
					v-if="studentList.length >= 1"
					style="flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px 5px; box-sizing: border-box; border-radius: 8px"
				>
					<uni-indexed-list v-if="true" :type="465" :options="studentList" @click="bindClick" />
				</view>
			</PageWrapper>
		</view>
		<up-modal v-model:show="showQrcode" :show-confirm-button="false" title="修改轮播图" width="660px">
			<!-- @cancel="cancel" -->
			<image style="width: 500px; height: 500px" :src="qrCodeUrl"></image>
			<!-- <img src="http://192.168.2.50:8091/jnjy/big/screen/getQrCode?campusId=1233" alt="二维码"></img> -->
		</up-modal>
		<FullscreenSwiper ref="swiper" />
	</view>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { onShow, onHide, onLoad, onPullDownRefresh } from '@dcloudio/uni-app';

import topLogo from '@/components/topLogo.vue';
import studentIndexList from '@/components/studentIndexList.vue';
import FullscreenSwiper from '@/components/FullscreenSwiper.vue';
import {
	getCampus,
	getStudentFaceCount,
	getCompletedCourseStudentList
	// getQrCode
} from '@/api/getData.js';
import PageWrapper from '@/components/PageWrapper.vue';
// ✅ 正确：直接写在 <script setup> 顶层

const swiper = ref(null);
const showSwiper = () => {
	swiper.value?.showSwiper();
};
const toTeacherTable = () => {
	uni.navigateTo({
		url: `/pages/teacherTable/teacherTable`
	});
};
const toCancelledClasses = () => {
	uni.navigateTo({
		url: `/pages/listOfCancelledClasses/listOfCancelledClasses`
	});
};

const textTip = ref(['sadflkj;asdkjf;lkasj;dflkj;asldkfj', 'waefoiapoiwef', 'aowiejfpoijawpfoi']);

const showQrcode = ref(false);
let timer1 = null;
const showQrcodeModal = () => {
	showQrcode.value = true;
	timer1 = setTimeout(() => {
		hide();
	}, 20000);
};
const hide = () => {
	if (timer1) clearTimeout(timer1);
};
// const cancel=()=>{
// 	show
// }
const studentList = ref([
	// 	{
	// 	id: 3650,
	// 	name: '白羊',
	// 	count: 3
	// },
]);
const qrCodeUrl = ref(null);

const getStudentList = async () => {
	try {
		uni.showLoading({
			title: '请稍候...'
		});
		console.log('今日学生列表请求参数', campusId.value);
		const res = await getCompletedCourseStudentList(campusId.value);
		if (res.code == 200) {
			if (res.data) {
				studentList.value = res.data.map((item) => ({
					letter: item.firstLetter,
					data: item.studentList.map((student) => ({
						name: student.studentName,
						id: student.studentId,
						count: student.zongHour,
						faceUrl: student.faceUrl
					}))
				}));
				console.log('学生列表', studentList.value);
			}
		}
	} catch (error) {
		console.log('消课学生列表请求失败', error);
	} finally {
		setTimeout(() => uni.hideLoading(), 500);
	}
};
const sysInfo = ref(null);
const campus = ref('');
const campusId = ref(null);
const getCampusInfo = async () => {
	try {
		const res = await getCampus(deviceMac.value);
		console.log('校区信息', res.data);
		if (res.code == 200) {
			campus.value = res.data.campus;
			campusId.value = res.data.campusId;
			uni.setStorageSync('campusId', campusId.value);
			uni.setStorageSync('campusSource', res.data.campusSource);
			qrCodeUrl.value = `https://tsr.dingshengtaiqiu.com/billiards-data/jnjy/big/screen/getQrCode?url=https://jnjy.dingshengtaiqiu.com/h5?campusId=${campusId.value}`;
			getStuFaceCount();
			getStudentList();
		}
	} catch (error) {
		console.log('校区信息请求失败', error);
	} finally {
		uni.stopPullDownRefresh();
	}
};
const faceCount = ref(0);
const noFaceCount = ref(0);
const getStuFaceCount = async () => {
	// uni.showLoading({
	// 	title: "数据加载中，请稍后",
	// });
	try {
		const res = await getStudentFaceCount(campusId.value);
		if (res.code == 200) {
			console.log('学生数量', res.data);
			faceCount.value = res.data.faceCount;
			noFaceCount.value = res.data.noFaceCount;
		}
	} catch (error) {
		console.log('学生头像录入数量请求失败', error);
	} finally {
		// uni.hideLoading();
	}
};

const format = (mac) => {
	if (parseInt(mac) >= 0) {
		var numbder = parseInt(mac).toString(16);
		var num = numbder.length == 1 ? '0' + numbder : numbder;
		return num;
	} else {
		var numbder = parseInt(256 - Math.abs(mac)).toString(16);
		var num = numbder.length == 1 ? '0' + numbder : numbder;
		return num;
	}
};
const isWifi = () => {
	if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_WIFI) {
		return '02:00:00:00:00:00';
	} else {
		plus.nativeUI.confirm('需要打开WiFi才能获取到MAC地址,是否去打开WiFi', function (event) {
			if (event.index == 0) {
				var main = plus.android.runtimeMainActivity();
				var Intent = plus.android.importClass('android.content.Intent');
				var intent = new Intent();
				intent.setClassName('com.android.settings', 'com.android.settings.wifi.WifiSettings');
				main.startActivity(intent);
			}
		});
	}
};
const toNoEnter = () => {
	uni.navigateTo({
		url: `/pages/noEnter/noEnter?campusId=${campusId.value}`
	});
};
const toEntered = () => {
	uni.navigateTo({
		url: `/pages/entered/entered?campusId=${campusId.value}`
	});
};
const bindClick = (e) => {
	console.log(222, e);
	if (e.item.count == 0) {
		return;
	}
	uni.navigateTo({
		url: `/pages/studentSubClass/studentSubClass?id=${e.item.id}&name=${e.item.name}&campusId=${campusId.value}&faceUrl=${e.item.faceUrl}`
	});
};
const handleStudentSelect = (student) => {
	console.log('选中学生:', student);
	// uni.showModal({
	//   title: '选中学生',
	//   content: `${student.name} - ${student.classes}`,
	//   showCancel: false
	// });
};
const onSelect = (info) => {
	console.log('选中学生：', info);
};
const MACaddress = () => {
	// console.log('获取设备mac');
	var Build = plus.android.importClass('android.os.Build');
	if (Build.VERSION.SDK_INT < 23) {
		//android 6.0以下版本
		return this.WifiInfoMac();
	} else if (Build.VERSION.SDK_INT == 23) {
		//android 6.0
		return this.ReaderMac();
	} else {
		return NetworkMac();
	}
};
// uni.$emit("user:interact");
const imgUrl = ref('');
onMounted(() => {
	// getCampusInfo();
	// MACaddress();
	// uni.$emit('user:interact')
});
onShow(() => {
	uni.$emit('user:interact');
	MACaddress();
	getCampusInfo();
	sysInfo.value = uni.getSystemInfoSync();
});
onHide(() => {
	// console.log("【index】页面隐藏，提前重置");
	uni.$emit('user:interact');
});
onLoad(() => {
	// uni.$emit('user:interact')
});
//下拉刷新页面
// onPullDownRefresh(() => {
// 	console.log('start pulldown');
// 	getCampusInfo();
// 	// setTimeout(function() {
// 	// }, 1000);

// 	// uni.startPullDownRefresh({
// 	// 	success: (res) => {
// 	// 		console.log("刷新成功")
// 	// 	}
// 	// });

// 	setTimeout(function() {
// 		uni.stopPullDownRefresh({
// 			success: (res) => {
// 				console.log("暂停刷新成功")
// 			}
// 		});
// 	}, 1000);
// })
const deviceMac = ref('');
const NetworkMac = () => {
	var NetworkInterface = plus.android.importClass('java.net.NetworkInterface');
	var networkInterface = NetworkInterface.getByName('eth1');
	if (networkInterface == null) {
		networkInterface = NetworkInterface.getByName('wlan0');
	}
	if (networkInterface == null) {
		isWifi();
		return '02:00:00:00:00:00';
	}
	var mac = networkInterface.getHardwareAddress();
	var macArr = [];
	for (var i in mac) {
		macArr.push(format(mac[i]));
	}
	console.log('获取设备的mac地址', macArr.join(':'));
	// setTimeout(()=>{
	// 	uni.showToast({
	// 		title: macArr.join(":"),
	// 		icon: 'none',
	// 		duration: 7000
	// 	})
	// },5000)

	deviceMac.value = macArr.join(':');
	// getLarge();
};

const clickStudent = (e) => {
	console.log(e);
};
const selectIndex = (e) => {
	console.log(e);
};
// 创建响应式数据
const indexList = ref(['A', 'B', 'C']);
const itemArr = ref([
	['列表A1', '列表A2', '列表A3'],
	['列表B1', '列表B2', '列表B3'],
	['列表C1', '列表C2', '列表C3']
]);
</script>

<style scoped>
.sticky-title {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: #fff;
	padding-bottom: 20px;
	margin-bottom: 10px;
	background-image: linear-gradient(to bottom, #fff 80%, rgba(255, 255, 255, 0));
}

/* 确保父容器设置了相对定位，作为子元素绝对定位的参照 */
.custom-indexed-list {
	/* position: relative !important; */
	/* 覆盖可能的绝对定位 */
	/* height: auto !important; */
	/* 高度自适应 */
	/* max-height: 100% !important; */
	/* 最大高度不超过父容器 */
	/* width: 100% !important; */
	/* top: 0 !important; */
	/* left: 0 !important; */
}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}

.clickBtn {
	box-sizing: border-box;
	width: 49.5%;
	height: 137px;
	background: #ffffff;
	border-radius: 8px 8px 8px 8px;
	display: flex;
	padding: 35px 45px;
}

.clickBtn:active {
	background: #e8f0ff;
}
</style>
